<template>
  <div class="flex flex-col w-full h-full">
    <div class="detailLogo flex flex-col justify-center">
      <img src="@/assets/imgs/detailLogo.png" alt="" class="w-250px h40px ml-50px" />
    </div>
    <div class="video-detail" :class="buttonState ? '' : 'full-screen'">
      <div class="vd-left">
        <el-card style="width: 100%" shadow="hover">
          <div class="vd-title"><span>{{ videoForm.name }}</span></div>
          <div class="flex justify-center c-#999999 font-size-14px mb-10px"><span>1111</span></div>
          <div class="vdl-top">
            <video v-if="clientWidth !== 0" controls id="my-video-top" class="video-js vjs-default-skin" preload="auto"
              @timeupdate="timeupdate">
              <source :src="videoForm.url" />
            </video>
          </div>
          <div class="vdl-bottom" style="width: 100%; margin-top: 20px">
            <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="字幕信息" name="first">
                <el-timeline>
                  <el-timeline-item timestamp="00:00:18—00:00:30" placement="top">
                    <el-card>
                      各位观众晚上好，晚上好，今天是7月11号，星期一，农历六月13，欢迎收看新闻联播节目，首先为您介绍今天节目的主要内容。
                    </el-card>
                  </el-timeline-item>
                  <el-timeline-item timestamp="00:00:18—00:00:30" placement="top">
                    <el-card>
                      党的18大以来，以习近平同志为核心的党中央推动党和国家事业取得历史性成就，
                      发生历史性变革，引领中华民族伟大复兴走过非凡十年。
                    </el-card>
                  </el-timeline-item>
                  <el-timeline-item timestamp="00:00:18—00:00:30" placement="top">
                    <el-card>
                      新闻联播从今天开始推出系列报道奋进新征程，
                      建功新时代非凡十年今天首先播出，新时代首都发展，
                      实现历史性跨越，李克强对全国安全生产电视电话会议作出重要批示，
                      强调层层压紧压实安全生产责任和措施，坚决防范遏制重特大事故发生，
                      中共中央办公厅转发中央宣传部、中央组织部关于认真组织学习习近平谈治国理政，
                      第四卷的通知，我国主产区累计收购小麦超过3000万吨，收购进度超过四成，
                      今年上半年，我国水利工程建设投资同比增长59.5%，创历史新高，俄乌冲突持续，
                      美国国内人士指出，美国等西方国家不顾乌克兰人民的利益，目的就是以乌克兰为工具遏制俄罗斯。
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </el-tab-pane>
              <!-- <el-tab-pane label="文本信息" name="second">
                <ul class="tabs-tow-ul">
                  <li>
                    <div class="li-time">00:00:19-00:00:36</div>
                    <div class="li-content">
                      <div><span class="li-title">标题</span><span class="li-text">百岁山</span></div>
                    </div>
                  </li>
                  <li>
                    <div class="li-time">00:00:19-00:00:36</div>
                    <div class="li-content">
                      <div><span class="li-title">标题</span><span class="li-text">百岁山</span></div>
                    </div>
                  </li>
                  <li>
                    <div class="li-time">00:00:19-00:00:36</div>
                    <div class="li-content">
                      <div><span class="li-title">标题</span><span class="li-text">百岁山</span></div>
                    </div>
                  </li>
                  <li>
                    <div class="li-time">00:00:19-00:00:36</div>
                    <div class="li-content">
                      <div><span class="li-title">标题</span><span class="li-text">百岁山</span></div>
                      <div><span class="li-title">标题</span><span class="li-text">百岁山</span></div>
                      <div><span class="li-title">标题</span><span class="li-text">百岁山</span></div>
                      <div><span class="li-title">标题</span><span class="li-text">百岁山</span></div>
                    </div>
                  </li>
                  <li>
                    <div class="li-time">00:00:19-00:00:36</div>
                    <div class="li-content">
                      <div><span class="li-title">标题</span><span class="li-text">百岁山</span></div>
                    </div>
                  </li>
                </ul>
              </el-tab-pane> -->
              <el-tab-pane label="视觉信息" name="third">
                <div class="tabs-three-title">
                  <span>指示牌/标识牌</span><span>共计出现</span> <span>8次</span><span>|</span><span>28秒</span>
                </div>
                <div class="tabs-three-box" v-for="item in 10" :key="item">
                  <img src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" alt="" />
                  <div class="flex-1 pl-20px">00:01:42:05-00:01:44:17</div>
                  <div class="w-100px">时长 2秒12顿</div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </div>
      <div class="vd-right">
        <el-card style="width: 100%" shadow="hover">
          <div>
            <div class="rtb-tabs">基本信息</div>
            <el-form :model="videoForm" label-width="auto" style="margin: 20px 0 40px" label-position="left">
              <el-form-item label="封面：" align="top">
                <el-image style="width: 277px; height: 148px" :src="videoForm.thumb" :zoom-rate="1.2" :max-scale="7"
                  :min-scale="0.2" :preview-src-list="[videoForm.thumb]" :initial-index="4"
                  fit="cover" /></el-form-item>
              <el-form-item label="简介：">
                <el-input v-model="videoForm.remark" :autosize="{ minRows: 4, maxRows: 4 }" type="textarea"
                  resize="none" disabled />
              </el-form-item>
              <el-form-item label="视频类型：">新闻</el-form-item>
              <el-form-item label="台标：">CCTV-13新闻频道</el-form-item>
              <el-form-item label="栏目名称：">新闻联播</el-form-item>
              <el-form-item label="来源：">解放军出版社</el-form-item>
            </el-form>
          </div>
          <div>
            <div class="rtb-tabs mb-20px">标签信息</div>
            <el-form :column="1" label-width="auto" label-position="left">
              <el-form-item label="文本标签">
                <el-input v-model="videoForm.remark" :autosize="{ minRows: 4, maxRows: 4 }" type="textarea"
                  resize="none" disabled />
              </el-form-item>
              <el-form-item label="主持人/记者" align="top">
                <div class="demo-fit">
                  <div v-for="(item, index) in avatarList" :key="index" class="block">
                    <el-avatar :size="50" fit="cover" :src="item.url" />
                    <span class="title">{{ item.title }}</span>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <div class="rtb-tabs mb-20px">推荐图书</div>
            <div class="bookRecommendations">
              <div class="b-books-box flex">
                <div class="b-books" v-for="(item, index) in bookRecommendations" :key="index">
                  <img :src="item.imgPath" alt="" />
                  <p>{{ item.text }}</p>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="rtb-tabs mb-20px">推荐视频</div>
            <div class="recommendedVideos">
              <div class="b-videos-box flex">
                <div class="b-videos" v-for="(item, index) in recommendedVideos" :key="index">
                  <img :src="item.url" alt="" />
                  <p>{{ item.text }}</p>
                  <svg t="1723794794074" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="6314" width="42" height="42">
                    <path
                      d="M420.397 310.473l307.786 183.206c21.984 14.657 14.657 21.984 0 29.313l-315.114 190.535c-21.984 14.657-29.313 7.328-29.313-14.657v-381.068c0-21.984 14.657-21.984 36.641-7.328zM449.71 266.503l307.786 183.206c51.298 36.641 51.298 87.939 0 117.252v0l-315.114 190.535c-21.984 14.657-51.298 21.984-80.611 7.328-21.984-14.657-29.313-36.641-29.313-65.954v-381.068c0-21.984 7.328-43.97 29.313-58.626 29.313-14.657 58.626-7.328 87.939 7.328zM508.336 32c-263.817 0-476.336 212.519-476.336 476.336s212.519 483.664 476.336 483.664c263.817 0 483.664-219.848 483.664-483.664 0-263.817-219.848-476.336-483.664-476.336v0z"
                      p-id="6315" fill="#515151"></path>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script setup>
import videoUrl from '@/assets/imgs/testVideo.mp4'
import fm from '@/assets/imgs/videoPoster.png'
import image1 from '@/views/book/image/kgj.png'
import { ref, reactive, toRefs } from 'vue'
import videojs from 'video.js'
import * as videoApi from '@/api/video'
import { useRoute } from 'vue-router'
const route = useRoute()
import 'video.js/dist/video-js.css'
const activeName = ref('first')
const videoForm = ref({
  url: videoUrl,
  name: '新时代强军文学作品选',
  format: 'MP4',
  size: '1.5M',
  id: 2,
  playVideoState: false,
  thumb: fm,
  remark: '1.新闻联播今天推出系列报道奋进新征程,建设新时代非凡十年,新时代首都发展实现历史性跨越,坚决防范遏制重特大事故发生。2.习近平在北京视察,称北京是伟大祖国的首都样板,十年间首都城市现代化治理水亚持绩描强 昆生每补息基提升 国际一流和涨官星之都建设不断取得重大进屏'
})
const buttonState = ref()
const id = route.query.id
const info = async () => {
  videoForm.value = await videoApi.selectOne(id)
  console.log(videoForm.value)
  if (videoForm.value.url) increment()
}
const handleClick = (tab, event) => {
  console.log(tab, event)
}
const clientWidth = ref(0)
const clientHeight = ref(0)
onMounted(() => {
  info()
  buttonState.value = JSON.parse(route.query.buttonState)
  clientWidth.value = window.document.querySelector('.vdl-top')?.clientWidth
  clientHeight.value = window.document.querySelector('.vdl-top')?.clientHeight
})
const timeupdate = (e) => {
  console.log(e)
  console.log(e.target.currentTime)
}
onUnmounted(() => {
  videoIdList.map((item, index) => {
    var player = videojs('my-video' + item)
    player.dispose() // 销毁播放器实例
  })
})
// 定义 videojs 实例
const myPlayer = ref()
const videoIdList = reactive(['-top'])
// videojs 初始化函数
function initVideoSource() {
  console.log(videoIdList)
  videoIdList.map((item, index) => {
    myPlayer.value = videojs('my-video' + item, {
      width: clientWidth.value, //播放器高度
      height: clientHeight.value, //播放器高度
      controls: true, // 是否显示控制条
      preload: 'auto',
      autoplay: false, // 自动播放
      loop: false, // 循环播放
      // fluid: true, // 自适应宽高
      language: 'zh-CN', // 设置语言
      muted: true, // 是否静音
      inactivityTimeout: false,
      // 设置控制条组件
      controlBar: {
        // 设置控制条组件
        //  设置控制条里面组件的相关属性及显示与否
        currentTimeDisplay: true,
        timeDivider: true,
        durationDisplay: true,
        remainingTimeDisplay: false,
        volumePanel: {
          inline: false
        },
        pictureInPictureToggle: false
      },
      userActions: {
        seek: false
      }
    })
  })
}
// DOM更新后执行videojs初始化函数
async function increment() {
  await nextTick()
  initVideoSource()
}

const avatarList = [
  { title: '刘一', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' },
  { title: '陈二', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' },
  { title: '张三', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' },
  { title: '李四', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' },
  { title: '王五', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' }
]

const bookRecommendations = ref([
  {
    imgPath: image1,
    text: '新时代强军文学作品选（2012-2022）·报告文学卷'
  },
  {
    imgPath: image1,
    text: '实战化的战略思维'
  },
  {
    imgPath: image1,
    text: '中日军事防务关系史'
  }
])

const recommendedVideos = ref([
  {
    url: fm,
    text: '新时代强军文学作品选'
  },
  {
    url: fm,
    text: '新时代强军文学作品选'
  }
])
</script>

<style lang="scss" scoped>
.full-screen {

  height: calc(100vh - 20px - 20px);
  overflow: auto; // 显示滚动条，根据内容决定是否显示
  /* 隐藏默认的滚动条样式 */
  scrollbar-width: none; // Firefox
  -ms-overflow-style: none; // IE and Edge */
}

.el-timeline {
  padding-left: 0;
}

// .tabs-tow-ul {
//   li::before {
//     content: '';
//     width: 5px;
//     height: 5px;
//     border-radius: 5px;
//     margin-right: 20px;
//     margin-top: 0.5rem;
//     background-color: #cccccc;
//   }

//   li {
//     display: flex;
//     justify-content: flex-start;

//     .li-content {
//       margin-left: 30px;

//       div {
//         margin-bottom: 20px;

//         .li-title {
//           margin-right: 100px;
//         }
//       }
//     }
//   }
// }

.tabs-three-title {
  margin-bottom: 15px;

  span:nth-child(1) {
    color: #447D60;
    font-weight: bold;
    margin-right: 20px;
  }

  span:nth-child(2) {}

  span:nth-child(3) {
    color: #006eff;
    margin-left: 10px;
  }

  span:nth-child(4) {
    color: #006eff;
    margin-right: 10px;
    margin-left: 10px;
  }

  span:nth-child(5) {
    color: #006eff;
  }
}

.tabs-three-box {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #F5F5F5;

  img {
    width: 100px;
    height: 50px;
    margin-right: 10px;
  }

  // .dot {
  //   height: 5px;
  //   /* 圆点的高度 */
  //   width: 5px;
  //   /* 圆点的宽度 */
  //   background-color: #bbb;
  //   /* 圆点的颜色 */
  //   border-radius: 50%;
  //   /* 圆形的关键点是将border-radius设置成50% */
  //   display: inline-block;
  //   /* 使其成为行内块元素以便与后续文本正确显示 */
  // }
  img::after {
    height: 5px;
    /* 圆点的高度 */
    width: 5px;
    /* 圆点的宽度 */
    background-color: #bbb;
    /* 圆点的颜色 */
    border-radius: 50%;
    /* 圆形的关键点是将border-radius设置成50% */
    display: inline-block;
    /* 使其成为行内块元素以便与后续文本正确显示 */
  }
}


.recommendedVideos {
  padding: 10px;
  box-sizing: border-box;

  .b-videos-box {
    justify-content: space-around;

    .b-videos {
      display: flex;
      width: 45%;
      height: 165px;
      flex-direction: column;
      align-items: center;
      position: relative;

      img {
        width: 100%;
        height: 100%;
      }

      p {
        font-size: 12px;
      }

      .icon {
        position: absolute;
        margin: auto;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}

.bookRecommendations {
  padding: 10px;
  box-sizing: border-box;

  .b-books-box {
    justify-content: space-around;

    .b-books {
      display: flex;
      width: 158px;
      flex-direction: column;
      align-items: center;

      img {
        width: 158px;
        height: 215px;
      }

      p {
        font-size: 12px;
      }
    }
  }
}

::v-deep(.vjs-big-play-button) {
  top: calc((350px - 1.63332em) / 2);
  left: calc((647px - 3em) / 2);
}

.demo-fit {
  display: flex;
  text-align: center;
  justify-content: flex-start;
}

.demo-fit .block {
  display: flex;
  flex-direction: column;
  margin-right: 50px;
}

.demo-fit .title {
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

.video-detail {
  padding: 20px 80px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;

  .vd-left {
    padding-right: 20px;
    width: 55%;
    height: 100%;
    box-sizing: border-box;

    .vd-title {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
      font-size: 20px;
    }

    .vdl-top {
      height: 350px;

      video {
        width: 100%;
        height: 100%;
      }
    }

    .vdl-bottom {}
  }

  .vd-right {
    width: 45%;

    .rtb-tabs {
      position: relative;
      left: -20px;
      width: 150px;
      height: 35px;
      line-height: 35px;
      padding-left: 20px;
      border-radius: 0px 10px 10px 0px;
      background: #447D60;
      box-sizing: border-box;
      letter-spacing: 0em;
      color: #ffffff;
    }

    .rtb-content-margin {
      margin-right: 10px;
    }
  }
}

.detailLogo {
  width: 100%;
  height: 200px;
  background: url('@/assets/imgs/detailbg.png') no-repeat;
  background-size: 100% 100%;
}
</style>
